<template>
    <div>
        <!-- 搜索框 -->
        <el-input placeholder="请输入内容" v-model="searchKeyword" @input="handleSearch">
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
        <el-button type="danger" size="small" @click="handleBatchDelete">批量删除</el-button>
        <el-table ref="multipleTable" :data="currentTableData" style="width: 100%" @row-click="openEditModal"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="nickname" label="昵称" width="180" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="id" label="ID" width="180" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="gender" label="性别" width="100" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="platform" label="平台" width="100" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="status" label="状态" width="100" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="startTime" label="任务开始时间" width="200"></el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentPageChange"
            :current-page="currentPage" :page-size="pageSize" :page-sizes="[10]"
            layout="total, sizes, prev, pager, next, jumper" :total="totalDataCount">
        </el-pagination>



        <!-- 编辑模态框 -->
        <el-dialog title="编辑任务" :visible.sync="editDialogVisible" @close="clearEditData">
            <!-- 编辑表单 -->
            <el-form :model="editForm">
                <!-- 表单输入绑定 -->
                <el-form-item label="昵称">
                    <el-input v-model="editForm.nickname"></el-input>
                </el-form-item>
                <!-- ...其他表单项... -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmitEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                // 模拟数据
                // ...
                {
                    nickname: '张三',
                    id: '123456',
                    gender: '男',
                    platform: '微信',
                    status: '进行中',
                    startTime: '2022-01-01 10:00:00',
                },
                {
                    nickname: '李四',
                    id: '789012',
                    gender: '男',
                    platform: 'QQ',
                    status: '已完成',
                    startTime: '2022-01-02 14:30:00',
                },
                {
                    nickname: '五',
                    id: '345678',
                    gender: '男',
                    platform: '微速',
                    status: '进行中',
                    startTime: '2022-01-05 09:20:00',
                },
                {
                    nickname: '赵六',
                    id: '901234',
                    gender: '男',
                    platform: '抖音',
                    status: '进行中',
                    startTime: '2022-01-10 15:45:00',
                },
                {
                    nickname: '孙七',
                    id: '567890',
                    gender: '男',
                    platform: '微信',
                    status: '已完成',
                    startTime: '2022-01-15 20:50:00',
                },
                {
                    nickname: '周八',
                    id: '123450',
                    gender: '男',
                    platform: '淘宝',
                    status: '进行中',
                    startTime: '2022-01-20 13:10:00',
                },
                {
                    nickname: '张三',
                    id: '123456',
                    gender: '男',
                    platform: '微信',
                    status: '进行中',
                    startTime: '2022-01-01 10:00:00',
                },
                {
                    nickname: '李四',
                    id: '789012',
                    gender: '男',
                    platform: 'QQ',
                    status: '已完成',
                    startTime: '2022-01-02 14:30:00',
                },
                {
                    nickname: '五',
                    id: '345678',
                    gender: '男',
                    platform: '微速',
                    status: '进行中',
                    startTime: '2022-01-05 09:20:00',
                },
                {
                    nickname: '赵六',
                    id: '901234',
                    gender: '男',
                    platform: '抖音',
                    status: '进行中',
                    startTime: '2022-01-10 15:45:00',
                },
                {
                    nickname: '孙七',
                    id: '567890',
                    gender: '男',
                    platform: '微信',
                    status: '已完成',
                    startTime: '2022-01-15 20:50:00',
                },
                {
                    nickname: '周八',
                    id: '123450',
                    gender: '男',
                    platform: '淘宝',
                    status: '进行中',
                    startTime: '2022-01-20 13:10:00',
                },
            ],
            filteredTableData: [], // 用于存储过滤后的数据
            searchKeyword: '',
            currentPage: 1,
            pageSize: 10,
            totalDataCount: 0, // 用于存储总数据量
            editDialogVisible: false,
            selectedRows: [], // 用于存储选中的行
            editForm: { /* 编辑表单数据 */ },
        };
    },
    computed: {
        // 计算当前页的数据
        currentTableData() {
            let start = (this.currentPage - 1) * this.pageSize;
            let end = start + this.pageSize;
            return this.filteredTableData.slice(start, end);
        },

        watch: {
            // 监听 searchKeyword 的变化来更新过滤后的数据
            searchKeyword(newVal) {
                this.filterData();
                this.handleSearch(); // 确保分页信息正确
            },
        },
    },
    created() {
        this.totalDataCount = this.tableData.length; // 初始化总数据量
        this.filterData(); // 初始化过滤数据
    },
    methods: {
        handleEdit(row) {
            this.editForm = { ...row };
            this.editDialogVisible = true;
        },
        handleDelete(row) {
            const index = this.tableData.indexOf(row);
            if (index !== -1) {
                this.tableData.splice(index, 1);
                this.filteredTableData = this.tableData;
            }
        },
        handleSizeChange(newSize) {
            this.pageSize = newSize;
            this.currentPage = 1; // 改变页大小时，重置当前页码为1
        },
        handleCurrentPageChange(newPage) {
            this.currentPage = newPage;
        },
        handleSearch() {
            this.filteredTableData = this.tableData.filter(item =>
                Object.keys(item).some(key =>
                    String(item[key]).toLowerCase().includes(this.searchKeyword.toLowerCase())
                )
            );
            this.currentPage = 1; // 搜索后重置当前页码为1
        },
        filterData() {
            // 根据 searchKeyword 过滤数据
            this.filteredTableData = this.tableData.filter(item =>
                Object.keys(item).some(key =>
                    String(item[key]).toLowerCase().includes(this.searchKeyword.toLowerCase())
                )
            );
            this.totalDataCount = this.filteredTableData.length; // 更新总数据量
        },
        openEditModal(row) {
            // 可以在这里实现点击行时打开编辑模态框的逻辑
        },
        handleSubmitEdit() {
            // 更新数据的逻辑
            this.editDialogVisible = false;
        },
        // 批量删除
        handleBatchDelete() {
            if (this.selectedRows.length === 0) {
                this.$message('请至少选择一行数据进行删除');
                return;
            }
            // 从原始数据中删除选中的行
            this.tableData = this.tableData.filter(item => !this.selectedRows.includes(item));
            // 重新过滤表格数据
            this.filterData();
            // 清空选中行
            this.$refs.multipleTable.clearSelection();
            this.selectedRows = [];
        },

        // 处理选中行的变化
        handleSelectionChange(rows) {
            this.selectedRows = rows;
        },
        clearEditData() {
            this.editForm = {
                nickname: '',
                // ...其他表单数据重置...
            };
        },
        // 其他CRUD方法
    },
};
</script>